<template>
  <div class="h-full">
    <n-card class="h-full shadow-sm rounded-16px">
      <n-form class="w-full" size="small" inline>
        <n-form-item label="车间:" label-placement="left" style="width: 200px">
          <n-select
            v-model:value="selectedAreas"
            clearable
            multiple
            label-field="areaname"
            value-field="areaname"
            :options="areas"
          />
        </n-form-item>
        <n-form-item label="料号:" label-placement="left">
          <n-input v-model:value="selectedProductspecNames" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="工单:" label-placement="left">
          <n-input v-model:value="selectedLot" type="text" placeholder="模糊查询" />
        </n-form-item>
        <n-form-item label="工序:" label-placement="left" style="width: 200px">
          <n-select
            v-model:value="selectedProcessoperationNames"
            multiple
            clearable
            :options="processOperations"
            :render-label="poRenderLabel"
          />
        </n-form-item>
        <n-form-item label="" label-placement="left">
          <n-button type="primary" :on-click="getProWip">
            <template #icon><icon-mdi-map-search-outline /></template>
            查询
          </n-button>
        </n-form-item>
      </n-form>
      <vxe-grid v-bind="proWipGridOptions"></vxe-grid>
    </n-card>
  </div>
</template>
<script setup lang="tsx">
import { onMounted, reactive, ref } from 'vue';
import type { SelectOption } from 'naive-ui';
import type { VxeGridProps } from 'vxe-table';
import { fetchAreaList, fetchProcessopetationspec, fetchProWip } from '@/service';

const areas = ref<Factory.Area[]>([]);
const selectedAreas = ref([]);
const getAreaList = async () => {
  const result = await fetchAreaList();
  if (result.data) {
    areas.value = result.data;
  }
};

const selectedProductspecNames = ref('');
const selectedLot = ref('');

const processOperations = ref<Array<SelectOption>>([]);
const selectedProcessoperationNames = ref([]);

const sumNum = (list: any[], field: string) => {
  let count = 0;
  list.forEach(item => {
    count += Number(item[field]);
  });
  return count;
};

const poRenderLabel = (option: SelectOption) => {
  return `${option.value} - ${option.label}`;
};
const getProcessoperationSpec = async () => {
  const result = await fetchProcessopetationspec();
  if (result.data) {
    const processoperationSpecList: Array<SelectOption> = [];
    result.data.forEach(element => {
      const temp: SelectOption = {
        label: element.description,
        value: element.processoperationname
      };
      processoperationSpecList.push(temp);
    });
    processOperations.value = processoperationSpecList;
  }
};

onMounted(async () => {
  getAreaList();
  getProcessoperationSpec();
});

const proWipGridOptions = reactive<VxeGridProps>({
  border: true,
  showFooter: true,
  size: 'mini',
  maxHeight: '550px',
  align: null,
  columnConfig: {
    resizable: true
  },
  columns: [
    {
      field: 'AREANAME',
      title: '车间',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'PROCESSOPERATIONNAME',
      title: '当前工序',
      sortable: true,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'LOTNAME',
      title: '工单号',
      width: 180,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'PROIN', title: '投入数' },
    { field: 'SUBPRODUCTOKQUANTITY', title: '合格数' },
    {
      field: 'PRODUCTSPECNAME',
      title: '料号',
      width: 180,
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'CARRIERNAME',
      title: '提篮/小盒',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    {
      field: 'GROUPNAME',
      title: '大盒',
      filters: [{ data: { vals: [], sVal: '' } }],
      filterRender: { name: 'FilterContent' }
    },
    { field: 'PLANQUANTITY', title: '订单数量' },
    { field: 'PLANRELEASEDTIME', title: '投料日期' },
    { field: 'PLANFINISHEDTIME', title: '交货日期' }
  ],
  toolbarConfig: {
    buttons: [],
    export: true,
    print: true
    // zoom: true
  },
  data: [],
  footerMethod({ columns, data }) {
    return [
      columns.map((column, columnIndex) => {
        if (columnIndex === 0) {
          return 'Σ总计';
        }
        if (column.field === 'PROIN' || column.field === 'SUBPRODUCTOKQUANTITY' || column.field === 'PLANQUANTITY') {
          return sumNum(data, column.property);
        }
        return '';
      })
    ];
  },
  mergeCells: [],
  exportConfig: {
    remote: false,
    types: ['xlsx'],
    modes: ['current', 'selected', 'all']
  }
});

const getProWip = async () => {
  const result = await fetchProWip(
    selectedAreas.value.join(','),
    selectedLot.value,
    selectedProductspecNames.value,
    selectedProcessoperationNames.value.join(',')
  );
  if (result.data) {
    proWipGridOptions.data = result.data;
  }
};
</script>
